<template>
    <!-- 注册页面 -->

    <body>
        <div class="app">
            <div class="head">
                <p>用户注册</p>
            </div>
            <div class="back">
                <el-button-group>
                    <el-button type="primary" icon="el-icon-arrow-left"
                        style="background: transparent;border: none; color: black;padding-left: 6px;"
                        @click="goBack()">返回主界面</el-button>
                </el-button-group>
            </div>
            <div class="login">
                <h3><span @click="onlogin">用户登录</span> <span style="margin-left: 15px;color: #d54d4d;">点我注册</span>
                    <!-- <el-button type="primary"  >点我注册</el-button> -->
                </h3>
                <el-form :model="loginForm" ref="form" label-width="0px" :rules="rules">

                    <el-form-item prop="username">
                        <el-input type="text" v-model="loginForm.username" placeholder="账号">
                            <template slot="prefix">
                                <i class="el-icon-user custom-prefix"></i>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input type="password" v-model="loginForm.password" placeholder="密码" show-password>
                            <template slot="prefix">
                                <i class="el-icon-lock custom-prefix"
                                    :class="showPassword ? 'el-icon-view' : 'el-icon-view-off'" @click="togglePassword"></i>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="password2">
                        <el-input type="password" v-model="loginForm.password2" placeholder="确认密码" show-password>
                            <template slot="prefix">
                                <i class="el-icon-lock custom-prefix"
                                    :class="showPassword ? 'el-icon-view' : 'el-icon-view-off'" @click="togglePassword"></i>
                            </template>
                        </el-input>
                    </el-form-item>


                    <el-form-item style="padding-top: 20px;">
                        <el-button type="primary" style="background: #d54d4d; border: none;width: 100%;"
                            @click="login">注册</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" style="background: #aa6868; border: none;width: 100%"
                            @click="reset">重置</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </div>
    </body>
</template>
          
<script>

export default {
    //登录界面
    name: "register",
    // 注册组件
    components: {

    },
    data() {

        return {
            //基本校验
            rules: {
                username: [
                    { required: true, message: '账号不能为空', trigger: 'blur' },
                    { min: 3, max: 11, message: '账号必须以字母开头,长度在3至11之间', trigger: 'blur' },
                    { validator: this.validateUsername, trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    { min: 3, max: 11, message: '密码只能包含字母和数字,长度在3至11之间', trigger: 'blur' },
                    { validator: this.validatePassword2, trigger: 'blur' }
                ],
                password2: [
                    { required: true, message: '确认密码不能为空', trigger: 'blur' },
                    { min: 3, max: 11, message: '密码只能包含字母和数字,长度在3至11之间', trigger: 'blur' },
                    { validator: this.validatePassword2, trigger: 'blur' }
                ]
            },


            loginForm: {
                username: '',
                password: '',
                password2: '',
            },
            showPassword: false,
        }
    },
    methods: {
        // 返回
        goBack() {
            // window.history.back();
            this.$router.push("/user");
        },
        //重置
        reset() {
            this.loginForm.username = "";
            this.loginForm.password = "";
            this.loginForm.password2 = "";
        },
        //登录
        login() {

            // 校验密码是否相同
            if (this.loginForm.password !== this.loginForm.password2) {
                this.$message.error('两次输入的密码不一致');
                return;
            }
            //判断账号密码不为空
            if (this.loginForm.password === '' && this.loginForm.username === '') {
                this.$message.error('账号和密码不能为空');
                return;
            } else if (this.loginForm.password === '') {
                this.$message.error('密码不能为空');
                return;
            } else if (this.loginForm.username === '') {
                this.$message.error('账号不能为空');
                return;
            }

            this.$confirm('你将注册该账户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                customClass: 'my-message-box'
            }).then(() => {
                this.$http({
                    method: "post",
                    url: "http://106.52.94.26:3001/user/register",
                    data: {
                        username: this.loginForm.username, //用户名
                        password: this.loginForm.password, //密码
                    },
                }).then((res) => {
                    console.log(res);
                    if (res.data.code === 200) {
                        this.$message({
                            message: '注册成功，请登录',
                            type: 'success',
                            customClass: 'my-message'
                        });
                        //   // // 2. 跳转到登录
                        this.$router.push("/login");
                    } else {
                    }
                }).catch(error => {
                    // console.error('登录请求失败：', error); // 输出请求失败的错误信息
                    this.$message.error({
                        message: '注册请求失败，可能是api接口问题', customClass: 'my-message'
                    }); // 提示网络请求失败
                }
                );

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消',
                    customClass: 'my-message',
                });
            });
        },

        //跳注册
        onlogin() {
            // // 2. 跳转到注册
            this.$router.push("/login");
        },
        //密码的隐藏
        togglePassword() {
            this.showPassword = !this.showPassword;
        },

        //确认密码校验
        validatePassword2(rule, value, callback) {
            // 只包含字母和数字的正则表达式
            const regex = /^[a-zA-Z0-9]+$/;
            if (value === '') {
                callback(new Error('确认密码不能为空'));
            } else if (value !== this.loginForm.password) {
                callback(new Error('两次输入的密码不一致'));
            } else if (value && !regex.test(value)) {
                callback(new Error('密码只能包含字母和数字,长度在3至11之间'));
            } else {
                callback();
            }
        },
        //账号的字母校验
        validateUsername(rule, value, callback) {
            // 以字母开头的正则表达式
            const regex = /^[a-zA-Z][a-zA-Z0-9]*$/;
            if (value && !regex.test(value)) {
                callback(new Error('账号必须以字母开头,长度在3至11之间'));
            } else {
                callback();
            }
        },

    }

}
</script>
          
<style scoped>
.custom-prefix {
    /* 在此处添加自定义样式 */
    padding-top: 13px;
    padding-left: 5px;
}

body {
    /* background-color: #fff; */
    height: 100vh;
}

/* 头部 */
.app .head {
    width: 100%;
    height: 50px;
    background-color: rgb(235, 24, 67);
    color: aliceblue;
    text-align: center;
}

/* 返回 */
.app .back {}

.app {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    flex-direction: column;
    /* 纵向排列 */
    /* background-color: #fff; */
}

/* 登陆盒子 */
.app .login {
    width: 80%;
    border: 1px;
    /* border: 1px solid red; */
    margin: 0 auto;
    margin-top: 20px;
    /* background-color: antiquewhite; */
    text-align: center;

}
</style>